<template>
    <!-- 活动详情 -->
    <div>
        <el-scrollbar height="calc(60vh)">
            <el-card style="max-width: 100%">
                <el-form :model="formData" label-width="auto" style="max-width: 600px" ref="formRef">
                    <el-form-item label="负责人" prop="ownerId">
                        <el-input v-model="formData.ownerName"  disabled />
                    </el-form-item>
                    <el-form-item label="所属活动" prop="activityId">
                        <el-input v-model="formData.activityName"  disabled />
                    </el-form-item>
                    <el-form-item label="姓名" prop="fullName">
                        <el-input v-model="formData.fullName"  disabled />
                    </el-form-item>
                    <el-form-item label="称呼" prop="appellation">
                        <el-input v-model="formData.appellationValue"  disabled />
                    </el-form-item>
                    <el-form-item label="手机" prop="phone">
                        <el-input v-model="formData.phone"  disabled/>
                    </el-form-item>
                    <el-form-item label="微信" prop="weixin">
                        <el-input v-model="formData.weixin"  disabled />
                    </el-form-item>
                    <el-form-item label="QQ" prop="qq">
                        <el-input v-model="formData.qq"  disabled />
                    </el-form-item>
                    <el-form-item label="邮箱" prop="email">
                        <el-input v-model="formData.email"  disabled />
                    </el-form-item>
                    <el-form-item label="年龄" prop="age">
                        <el-input v-model="formData.age"  disabled />
                    </el-form-item>
                    <el-form-item label="职业" prop="job">
                        <el-input v-model="formData.job"  disabled />
                    </el-form-item>
                    <el-form-item label="年收入" prop="yearIncome">
                        <el-input v-model="formData.yearIncome"  disabled />
                    </el-form-item>
                    <el-form-item label="住址" prop="address">
                        <el-input v-model="formData.address"  disabled />
                    </el-form-item>
                    <el-form-item label="贷款" prop="needLoan">
                        <el-input v-model="formData.needLoanValue"  disabled />
                    </el-form-item>
                    <el-form-item label="意向状态" prop="intentionState">
                        <el-input v-model="formData.intentionStateValue"  disabled />
                    </el-form-item>
                    <el-form-item label="意向产品" prop="intentionProduct">
                        <el-input v-model="formData.intentionProductValue"  disabled />
                    </el-form-item>
                    <el-form-item label="线索状态" prop="state">
                        <el-input v-model="formData.stateValue"  disabled />
                    </el-form-item>
                    <el-form-item label="线索来源" prop="source">
                        <el-input v-model="formData.sourceValue"  disabled />
                    </el-form-item>
                    <el-form-item label="线索描述" prop="description">
                    <el-input v-model="formData.description" disabled type="textarea"/>
                    </el-form-item>
                    <el-form-item label="下次联系时间" prop="nextContactTime">
                        <el-date-picker
                            v-model="formData.nextContactTime"
                            type="date"
                            placeholder="请选择时间"
                            format="YYYY-MM-DD HH:mm:ss"
                            value-format="YYYY-MM-DD HH:mm:ss"
                            disabled
                        />
                    </el-form-item>
                    <el-form-item label="填写跟踪记录" prop="noteContent">
                        <el-input v-model="clueRemark.noteContent" type="textarea"/>
                    </el-form-item>
                    <el-form-item label="跟踪方式" prop="noteWay">
                        <el-select
                            placeholder="请选择跟踪方式"
                            v-model="clueRemark.noteWay"
                            clearable
                        >
                            <el-option
                                v-for="noteWay in noteWayOption"
                                :key="noteWay.id"
                                :label="noteWay.name"
                                :value="noteWay.id + ''"
                            />
                        </el-select>
                    </el-form-item>
                </el-form>
                <el-button type="primary" @click="saveRemark" plain>提交</el-button>
                <el-button type="success" @click="dialogVisibleClue2Customer = true" plain v-if="formData.state != '-1'">转换客户</el-button>
                <el-button type="success"  plain v-else disabled>已经转换为客户</el-button>
                <el-button type="info" @click="router.go(-1)" plain>返回</el-button>
            </el-card>
        </el-scrollbar>
    </div>
    <!-- 备注列表 -->
    <div style="margin: 20px;">
        <el-table :data="remarkList" style="width: 100%">
            <el-table-column prop="id" label="序号" />
            <el-table-column prop="createTime" label="记录时间" />
            <el-table-column prop="createByName" label="记录人" />
            <el-table-column prop="editTime" label="最后编辑时间" />
            <el-table-column prop="editByName" label="编辑人" />
            <el-table-column fixed="right" label="操作" >
                <template #default="scope">
                    <el-button link type="primary" size="small" @click="remarkInfo(scope.row.id)">编辑</el-button>
                    <el-button link type="danger" size="small" @click=deleteRemark(scope.row.id)>删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div style="margin-top: 20px;">
            <el-pagination 
                background 
                layout="prev, pager, next" 
                :total="page.total"
                :page-size="page.pageSize"
                @current-change="currentChange" 
            />
        </div>
    </div>
     <!-- 记录信息dialog对话框 -->
     <el-dialog
        v-model="dialogVisible"
        title="备注内容"
        width="500"
    >
        <div>
            <el-form :model="clueRemarkInfo" label-width="auto" style="max-width: 600px" ref="formRef">
                <el-form-item label="跟踪方式" prop="noteWay">
                        <el-select
                            placeholder="请选择跟踪方式"
                            v-model="clueRemarkInfo.noteWay"
                            clearable
                        >
                            <el-option
                                v-for="noteWay in noteWayOption"
                                :key="noteWay.id"
                                :label="noteWay.name"
                                :value="noteWay.id + ''"
                            />
                        </el-select>
                    </el-form-item>
                <el-form-item label="备注" >
                    <el-input  v-model="clueRemarkInfo.noteContent" type="textarea" :rows="6"/>
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
        <div class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="updateRemark">
                提交
            </el-button>
        </div>
        </template>
     </el-dialog>
     <!-- 转换客户对话框 -->
     <el-dialog
        v-model="dialogVisibleClue2Customer"
        title="线索转换客户"
        width="500"
    >
        <div>
            <el-form :model="customer" label-width="auto" style="max-width: 600px" ref="clue2customerRef">
                <el-form-item label="意向产品" prop="product">
                        <el-select
                            placeholder="请选择产品"
                            v-model="customer.product"
                            clearable
                        >
                            <el-option
                                v-for="product in productOption"
                                :key="product.id"
                                :label="product.name"
                                :value="product.id + ''"
                            />
                        </el-select>
                    </el-form-item>
                <el-form-item label="客户描述" prop="description">
                    <el-input  v-model="customer.description" type="textarea" :rows="6"/>
                </el-form-item>
                <el-form-item label="下次联系时间" prop="nextContactTime">
                    <el-date-picker
                        v-model="customer.nextContactTime"
                        type="date"
                        placeholder="请选择时间"
                        format="YYYY-MM-DD HH:mm:ss"
                        value-format="YYYY-MM-DD HH:mm:ss"
                        clearable
                    />
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
        <div class="dialog-footer">
            <el-button @click="dialogVisibleClue2Customer = false">取消</el-button>
            <el-button type="primary" @click="clue2Customer">
                提交
            </el-button>
        </div>
        </template>
     </el-dialog>
 </template>
<script lang="ts" setup name="ActivityDetail">
import { baseService } from '@/utils/httpReqest';
import { ElMessage, ElMessageBox } from 'element-plus';
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import { onMounted, reactive, ref } from 'vue';
import { useRoute } from 'vue-router';
import router from '@/router';
import { Clue } from '@/hooks/clue';
import { ClueRemark } from '@/hooks/clueRemark';
import { Customer } from '@/hooks/customer';
let route = useRoute();
let formData = reactive(new Clue());
let noteWayOption = ref<any[]>([]);
let clueRemark = reactive<ClueRemark>(new ClueRemark());
let clueRemarkInfo = reactive<ClueRemark>(new ClueRemark());
let remarkList = ref<ClueRemark[]>([]);
let dialogVisible = ref(false)
let dialogVisibleClue2Customer = ref(false);
let customer = reactive<Customer>(new Customer());
let formRef = ref<FormInstance>();
const clue2customerRef = ref<FormInstance>()
let page = reactive({
    pageSize: 2, //单页记录数
    total: 0,
    currentPage: 1,
})
class Option {
    id: string;
    name: string;
    constructor() {
        this.id = '';
        this.name = '';
    }
}
let productOption = ref<Option[]>([]);
let getNoteWay = () => {
    baseService.doGet(`/dicValue/noteWay`).then((res: any) => {
        if (res.code == 200) {
            noteWayOption.value = res.data
        } else {
            ElMessage.error("获取字典列表出现错误")
        }
    })
}
let clueInfo = () => {
    baseService.doGet(`/clue/clueCascadeInfo/${route.params.id}`)
        .then((res: any) => {
            if (res.code == 200) {
                for (const key in formData) {
                    formData[key as keyof Clue] = res.data[key]
                }
            } else {
                ElMessage.error("该线索信息不存在")
            }
        })
}
let saveRemark = () => {
    clueRemark.clueId = route.params.id + "";
    baseService.doPost("/clueRemark/save", clueRemark).then((res: any) => {
        if (res.code == 200) {
            ElMessage.success("添加成功")
            getRemarkList(page.currentPage);
            clueRemark.noteWay='';
            clueRemark.noteContent = ''
            clueRemark.clueId = ''
        } else {
            ElMessage.error("保存记录失败")
        }
    })

}
let getRemarkList = (currenPage = 1) => {
    baseService.doGet("/clueRemark/list", {
        currentPage: page.currentPage,
        pageSize: page.pageSize,
        clueId: route.params.id
    }).then((res: any) => {
        if (res.code == 200) {
            remarkList.value = res.data.data
            page.total = res.data.total
        } else {
            ElMessage.error("获取记录列表失败")
        }
    })
}
let currentChange = (currenPage: number) => {
    page.currentPage = currenPage;
    getRemarkList(currenPage);
}
let remarkInfo = (id: any) => {
    dialogVisible.value = true;
    baseService.doGet(`/clueRemark/info/${id}`).then((res: any) => {
        if (res.code == 200) {
            for (const key in clueRemarkInfo) {
                if (res.data[key] == null) {
                    clueRemarkInfo[key as keyof ClueRemark] = res.data[key];
                } else {
                    clueRemarkInfo[key as keyof ClueRemark] = res.data[key] + '';
                }
            }
        } else {
            ElMessage.error("获取记录信息失败")
        }
    })

}
let deleteRemark = (id: any) => {
    ElMessageBox.confirm(
        '确定要删除此记录吗?',
        'Warning',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            baseService.doPut(`/clueRemark/delete/${id}`).then((res: any) => {
                if (res.code == 200) {
                    ElMessage.success("删除成功")
                    getRemarkList(page.currentPage);
                } else {
                    ElMessage.error("删除失败")
                }
            })

        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })


}
let updateRemark = () => {
    baseService.doPut(`/clueRemark/update`, clueRemarkInfo).then((res: any) => {
        if (res.code == 200) {
            ElMessage.success("修改记录成功")
            getRemarkList(page.currentPage);
            dialogVisible.value = false;
        } else {
            ElMessage.error("修改记录信息失败")
        }
    })
}
let clue2Customer = () => {
    customer.clueId = route.params.id + '';
    baseService.doPost("/customer/clue2customer", customer).then((res: any) => {
        if (res.code == 200) {
            formData.state = '-1';
            dialogVisibleClue2Customer.value = false;
            ElMessage.success("转换成功")
        } else {
            ElMessage.error("转换失败")
        }

    })
}
let getProductOption = () => {
    baseService.doGet("/product/getNameAndId").then((res: any) => {
        if (res.code == 200) {
            productOption.value = res.data
        } else {
            ElMessage.error("获取产品列表出现错误")
        }
    })
}
onMounted(() => {
    clueInfo();
    getNoteWay();
    getRemarkList();
    getProductOption();

})

</script>
<style scoped></style>